import { useState, useEffect, useRef } from "react"
import { useSearchParams } from "react-router-dom"

// comps
import FullLoading from "../../components/FullLoading"
import LeftSided from "./components/LeftSided"
import MiddleSided from "./components/MiddleSided"
import RightSided from "./components/RightSided"
// hook
// api
import { getCompanyAudit, getCompareInfo } from "../../request/api"
// utils
// import dataJson from './components/data.json'

const ProfessionalCompare = () => {
  // 处理页面宽高比
  const [scale, setScale] = useState(1)
  useEffect(() => {
    function adjustScale() {
      const baseWidth = 1920 // 设计稿基准宽度
      const currentWidth = window.innerWidth
      const scale = currentWidth / baseWidth
      setScale(scale)
      if (scale >= 1) return

      document.body.style.transform = `scale(${scale})`
      document.body.style.transformOrigin = "top left"
      document.body.style.width = `${baseWidth}px`
      document.body.style.height = `1080px`
    }

    window.addEventListener("resize", adjustScale)
    adjustScale() // 初始化
  }, [])

  const [searchParams] = useSearchParams()

  const companyName1 = searchParams.get("compare1")
  const companyName2 = searchParams.get("compare2")

  // fetch
  const [loading1, setLoading1] = useState(true)
  const didInit1 = useRef(false)

  const [data1, setData1] = useState({})

  useEffect(() => {
    const fn = async () => {
      if (!didInit1.current) {
        didInit1.current = true
        try {
          const companyName = decodeURIComponent(
            companyName1 || "国网武汉供电公司"
          )
          const { data: data1 } = await getCompanyAudit(companyName)
          setData1(data1)
          setLoading1(false)
        } catch (error) {
          console.log("error: ", error)
          setLoading1(false)
        }
      }
    }
    fn()
  }, [companyName1])

  const [loading2, setLoading2] = useState(true)
  const didInit2 = useRef(false)
  const [data2, setData2] = useState({})
  useEffect(() => {
    const fn = async () => {
      if (!didInit2.current) {
        didInit2.current = true
        try {
          const companyName = decodeURIComponent(
            companyName2 || "国网武汉供电公司"
          )
          const { data: data2 } = await getCompanyAudit(companyName)
          setData2(data2)
          setLoading2(false)
        } catch (error) {
          console.log("error: ", error)
          setLoading2(false)
        }
      }
    }
    fn()
  }, [companyName2])

  const [middleLoading, setMiddleLoading] = useState(true)
  const didInit3 = useRef(false)
  const [data3, setData3] = useState({})
  useEffect(() => {
    const fn = async () => {
      if (!didInit3.current) {
        didInit3.current = true
        try {
          const { data } = await getCompareInfo(
            decodeURIComponent(companyName1),
            decodeURIComponent(companyName2)
          )
          setData3(data)
          setMiddleLoading(false)
        } catch (error) {
          console.log("error: ", error)
          setMiddleLoading(false)
        }
      }
    }
    fn()
  }, [companyName1, companyName2])

  return loading1 || loading2 || middleLoading ? (
    <FullLoading />
  ) : (
    <div
      className="h-full relative"
      style={{
        backgroundImage: `url('assistant-decision_bg.png')`,
        backgroundRepeat: "no-repeat",
        backgroundSize: `${scale} ${scale}`
      }}
    >
      <main className="flex items-between justify-between p-[24px] pt-[48px]">
        <LeftSided data={data1} title={companyName1} />
        <MiddleSided data={data3} />
        <RightSided data={data2} title={companyName2} />
      </main>
    </div>
  )
}

export default ProfessionalCompare
